<% include ./side.html %>
<style scoped>
	.com_block {
		padding-bottom: 10px;
	}

	.survey {
		padding-left: 30px;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.survey .com {
		width: 185px;
		font-size: 32px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-right: 35px;
		margin-bottom: 20px;
	}

	.survey .pv {
		font-size: 38px;
		font-weight: bold;
		color: #8776f7;
		flex-wrap: wrap;
	}

	.survey .com span {
		font-size: 22px;
		margin-right: 20px;
	}

	.search_1 .inp {
		background: #fff;
	}

	@media (max-width: 768px) {
		.survey .com {
			margin-left: 0 !important;
			font-size: 20px;
			width: 100px;
			text-align: center;
			display: flex;
			align-items: center;
			flex-direction: column;
		}

		.survey .com span {
			margin-right: 3px;
			display: block;
		}
	}
</style>
<div class="com_content_body main pb100" id="vue_id" v-cloak>
	<h1 class="com_h1">数据分析</h1>
	<div class="com_slide_tab_x mt30 mb30">
		<div class="item" :class="{'active':lable==1}" @click="checkoutLabel(1)">概况</div>
		<div class="item" :class="{'active':lable==2}" @click="checkoutLabel(2)">PV|AJAX|UV|IP|FLOW</div>
	</div>
	<div v-show="lable==1">
		<div class="com_topic mb20"><span class="iconfont">&#xe63a;</span>实时概况处理同步有{{timebetween}}分钟以内的延迟，每{{timebetween}}分钟自动更新一次。</div>
		<div class="com_block mt20">
			<h1 class="com_h2 mb20">查询某日概况</h1>
			<div class='search mb20'>
				<input id="zane-calendar-1" class="inp" type="text" placeholder="点击选择日期">
				<div class="tipscolor mt10" v-if="errTextleft">{{errTextleft}}</div>
			</div>
			<div class="survey" v-if="surveyone.app_id">
				<div class="com pv"><span>PV: </span>{{surveyone.pv}}</div>
				<div class="com uv"><span>UV: </span>{{surveyone.uv}}</div>
				<div class="com ip"><span>IP: </span>{{surveyone.ip}}</div>
				<div class="com ip"><span>AJAX: </span>{{surveyone.ajax}}</div>
				<div class="com ip"><span>跳出率: </span>{{surveyone.bounce||'0%'}}</div>
				<div class="com ip"><span>访问深度: </span>{{surveyone.depth||0}}</div>
				<div class="com ip"><span>流量: </span>{{surveyone.flow|flow}}</div>
			</div>
		</div>
		<div class="com_block mt20">
			<h1 class="com_h2 mb20">今日概况</h1>
			<div class="survey">
				<div class="com pv"><span>PV: </span>{{today.pv||0}}</div>
				<div class="com uv"><span>UV: </span>{{today.uv||0}}</div>
				<div class="com ip"><span>IP: </span>{{today.ip||0}}</div>
				<div class="com ip"><span>AJAX: </span>{{today.ajax||0}}</div>
				<div class="com ip"><span>流量: </span>{{today.flow|flow}}</div>
			</div>
		</div>
		<div v-if="historylist.length">
			<div class="com_block mt20" v-for="(item,index) in historylist" :key="index">
				<h1 class="com_h2 mb20">{{item.create_time|date}}</h1>
				<div class="survey">
					<div class="com pv"><span>PV: </span>{{item.pv||0}}</div>
					<div class="com uv"><span>UV: </span>{{item.uv||0}}</div>
					<div class="com ip"><span>IP: </span>{{item.ip||0}}</div>
					<div class="com ip"><span>AJAX: </span>{{item.ajax||0}}</div>
					<div class="com ip"><span>跳出率: </span>{{item.bounce||'0%'}}</div>
					<div class="com ip"><span>访问深度: </span>{{item.depth||0}}</div>
					<div class="com ip"><span>流量: </span>{{item.flow|flow}}</div>
				</div>
			</div>
		</div>
	</div>
	<div v-show="lable==2">
		<div class="com_topic mb20"><span class="iconfont">&#xe63a;</span> 实时数据处理同步有{{timebetween}}分钟以内的延迟，实时统计每{{timebetween}}分钟自动更新一次。流量统计以（M）为单位。</div>
		<div class='search search_1 mb20'>
			<input id="zane-calendar-2" class="inp" type="text" :placeholder="'时间粒度选择'+searchbetween+'小时以内'">
			<div class="tipscolor mt10" v-if="errText">{{errText}}</div>
		</div>
		<div class="com_block">
			<h1 class="com_h2 mb20">实时访问AJAX</h1>
			<div id="pvuvip_ajax" style="height:400px"></div>
		</div>
		<div class="com_block">
			<h1 class="com_h2 mb20">实时访问PV</h1>
			<div id="pvuvip_pv" style="height:400px"></div>
		</div>
		<div class="com_block mt20">
			<h1 class="com_h2 mb20">实时访问UV</h1>
			<div id="pvuvip_uv" style="height:400px"></div>
		</div>
		<div class="com_block mt20">
			<h1 class="com_h2 mb20">实时访问IP</h1>
			<div id="pvuvip_ip" style="height:400px"></div>
		</div>
		<div class="com_block mt20">
			<h1 class="com_h2 mb20">实时流量统计</h1>
			<div id="pvuvip_flow" style="height:400px"></div>
		</div>
	</div>
</div>

<script>
let myChartPV, myChartUV, myChartIP, myChartAJAX, myChartFLOW;
new Vue({
	el: '#vue_id',
	data: function () {
		return {
			lable:1, //1:概况 2：pv|uv|ip
			beginTime:'',
			endTime:'',
			timer:null,
			appId: util.getStorage('local', 'appId'),
			datalist:[],
			today:{},
			surveyone:{},
			errText:'',
			errTextleft:'',
			historylist:[],
			timebetween: 1,
			searchbetween: 1,
		}
	},
	filters: {
		date: window.Filter.date,
		flow: window.Filter.flow,
	},
	mounted() {
		this.xAxislist = [];
		this.itemlist1 = [];
		this.itemlist2 = [];
		this.itemlist3 = [];
		this.itemlist4 = [];
		this.itemlist5 = [];

		this.getPvUvIpSurvey();
		this.getHistoryPvUvIplist();
		zaneDate({
			elem: '#zane-calendar-1',
			width: 300,  
			done: (fulltime, begintime, endtime) => { 
				let beginTime = begintime+' 00:00:00'
				let endTime = begintime + ' 23:59:59'
				const maxday = new Date(new Date().format('yyyy/MM/dd') + ' 00:00:00').getTime();
				const beginday = new Date(beginTime).getTime();
				if(beginday >= maxday){
					this.errTextleft = '选择时间不能大于今日，请选择小于今日的历史间进行查询。';
					return;
				}
				this.errTextleft = '';
				this.getPvUvIpSurveyOne(beginTime,endTime)
			}, 
		})
		zaneDate({
			elem: '#zane-calendar-2',
			type:'doubleday',
			format: 'yyyy/MM/dd HH:mm:ss',
			showtime: true,
			done: (fulltime, begintime, endtime) => {
				this.errText = '';
				let beginstrap = new Date(begintime).getTime();
				let endstrap = new Date(endtime).getTime();
				let between = endstrap - beginstrap;
				let maxtime = this.timebetween * 60 * 1000 * 30;
				if(between<0){
					this.errText = "结束时间不能小于开始时间。";
					return false;
				}
				if (between > maxtime) {
					this.errText = `时间粒度选择${this.searchbetween}小时以内，支持所有时间段的查询。`;
					return false;
				}
				this.beginTime = begintime;
				this.endTime = endtime;
				this.getPvUvIpList();
			},
		})
	},
	methods: {
		checkoutLabel(lable){
			if (lable === this.lable) return;
			this.lable = lable;
			this.beginTime = '';
			this.endTime = '';

			if(lable == 1){
				this.getPvUvIpSurvey();
				this.getHistoryPvUvIplist();
			}else if(lable == 2){
				this.getPvUvIpList();
			};
		},
		// 概况
		getPvUvIpSurvey(){
			util.ajax({
				type:'get',
				nohideloading: true,
				url: `${config.baseApi}api/v1/pvuvip/getPvUvIpSurvey`,
				data:{
					appId:this.appId,
					beginTime: this.beginTime,
					endTime: this.beginTime,
				},
				success: (data) => {
					if (data.time) {
						this.timebetween = data.time / 1000 / 60;
						this.searchbetween = data.time * 30 / 1000 / 60 / 60;
					}
					this.today = data.data;
				}
			})
		},
		// 某日概况
		getPvUvIpSurveyOne(beginTime, endTime){
			util.ajax({
				type: 'get',
				url: `${config.baseApi}api/v1/pvuvip/getPvUvIpSurveyOne`,
				data: {
					appId: this.appId,
					beginTime: beginTime,
					endTime: endTime,
				},
				success: (data) => {
					this.surveyone = data.data;
				}
			})
		},
		// 历史统计列表
		getHistoryPvUvIplist(){
			util.ajax({
				type: 'get',
				url: `${config.baseApi}api/v1/pvuvip/getHistoryPvUvIplist`,
				data: {
					appId: this.appId,
				},
				success: (data) => {
					this.historylist = data.data || [];
				}
			})
		},
		getPvUvIpList(isInter){
			clearInterval(this.timer);
			util.ajax({
				url: `${config.baseApi}api/v1/pvuvip/getPvUvIpList`,
				data:{
					appId: this.appId,
					beginTime:this.beginTime,
					endTime:this.endTime,
				},
				success: (data) => {
					if (data.time) {
						this.timebetween = data.time / 1000 / 60;
						this.searchbetween = data.time * 30 / 1000 / 60 / 60;
					}
					this.xAxislist = [];
					this.itemlist1 = [];
					this.itemlist2 = [];
					this.itemlist3 = [];
					this.itemlist4 = [];
					this.itemlist5 = [];
					data.data.forEach(item=>{
						let time = new Date(item.time).format('hh:mm');
						this.xAxislist.push(time);
						this.itemlist1.push(item.pv)
						this.itemlist2.push(item.uv)
						this.itemlist3.push(item.ip)
						this.itemlist4.push(item.ajax)
						this.itemlist5.push(item.flow)
					});
					this.drow('PV', this.xAxislist, this.itemlist1);
					this.drow('UV', this.xAxislist, this.itemlist2);
					this.drow('IP', this.xAxislist, this.itemlist3);
					this.drow('AJAX', this.xAxislist, this.itemlist4);
					this.drow('FLOW', this.xAxislist, this.itemlist5);
					this.timer = setInterval(() => {
						this.getPvUvIpOne();
					}, data.time || 60000)
				}
			})
		},
		getPvUvIpOne(){
			util.ajax({
				url: `${config.baseApi}api/v1/pvuvip/getPvUvIpOne`,
				data: {
					type: this.type,
					appId: this.appId,
				},
				success: (data) => {
					let datas = data.data;
					let time = new Date(datas.time).format('mm');
					// 动态数据接口 addData
					this.xAxislist.shift();
					this.itemlist1.shift();
					this.itemlist2.shift();
					this.itemlist3.shift();
					this.itemlist4.shift();
					this.itemlist5.shift();

					this.xAxislist.push(time);
					this.itemlist1.push(datas.pv || 0)
					this.itemlist2.push(datas.uv || 0)
					this.itemlist3.push(datas.ip || 0)
					this.itemlist4.push(datas.ajax || 0)
					this.itemlist5.push(datas.flow || 0)

					myChartPV.setOption({ series: [{ data: this.itemlist1 }] });
					myChartUV.setOption({ series: [{ data: this.itemlist2 }] });
					myChartIP.setOption({ series: [{ data: this.itemlist3 }] });
					myChartAJAX.setOption({ series: [{ data: this.itemlist4 }] });
					myChartFLOW.setOption({ series: [{ data: this.itemlist5 }] });
				}
			})
		},
		drow(type, xAxislist, itemlist){
			// 基于准备好的dom，初始化echarts图表
			let color = '';
			if(type=='PV'){
				myChartPV = echarts.init(document.getElementById('pvuvip_pv'));
				color = '#42aaff'
			}else if(type == 'UV'){
				myChartUV = echarts.init(document.getElementById('pvuvip_uv'));
				color = '#58d17e'
			}else if(type == 'IP'){
				myChartIP = echarts.init(document.getElementById('pvuvip_ip'));
				color = '#f46d85'
			} else if (type == 'AJAX') {
				myChartAJAX = echarts.init(document.getElementById('pvuvip_ajax'));
				color = '#8776f7'
			} else if (type == 'FLOW') {
				myChartFLOW = echarts.init(document.getElementById('pvuvip_flow'));
				color = '#8776f7'
			}
			const option = {
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: [type]
				},
				color:[color],
				toolbox: {
					show: false,
					feature: {
						mark: { show: true },
						magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
						restore: { show: true },
						saveAsImage: { show: false }
					}
				},
				grid:{
					borderWidth:0,
				},
				xAxis: [
					{
						type: 'category',
						data: xAxislist,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: true,
							lineStyle: {
								color: '#eee',
							}
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: '#B7B7B7',
								fontSize:10,
							},
						},
					}
				],
				yAxis: [
					{
						type: 'value',
						axisLabel: {
							show: true,
							textStyle: {
								color: '#B7B7B7',
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
								color: '#eee',
								width: 1,
							}
						},
						axisLine: {
							show: false,
						},
					}
				],
				series: [
					{
						name: type,
						type: 'line',
						smooth: true,
						itemStyle: { normal: { areaStyle: { type: 'default' } } },
						data: itemlist
					},
				]
			};
			// 为echarts对象加载数据 
			if (type == 'PV') {
				myChartPV.setOption(option); 
			} else if (type == 'UV') {
				myChartUV.setOption(option); 
			} else if (type == 'IP') {
				myChartIP.setOption(option); 
			} else if (type == 'AJAX') {
				myChartAJAX.setOption(option);
			} else if (type == 'FLOW') {
				myChartFLOW.setOption(option);
			}
		}
	},
})


</script>